<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import NewShopAuthService from '../services/NewShopAuthService.js'
import NewShopCartService from '../services/NewShopCartService.js'

const route = useRoute()
const productId = ref(Number(route.params.id))
const quantity = ref(1)
const selectedColor = ref('')
const selectedSize = ref('')
const product = ref(null)
const isLoading = ref(true)
const errorMessage = ref('')

// 模拟产品数据
const productsData = [
  {
    id: 1,
    name: '高级无线耳机',
    price: 899,
    image: 'https://via.placeholder.com/600x400?text=Wireless+Headphones',
    description: '这款高级无线耳机采用主动降噪技术，提供出色的音质和舒适的佩戴体验。长达24小时的续航时间，让您随时随地享受高品质音乐。',
    colors: ['黑色', '白色', '银色'],
    sizes: ['均码'],
    details: {
      battery: '单次6小时，充电盒24小时',
      bluetooth: '5.2',
      noiseCancellation: '主动降噪',
      material: '航空级铝合金外壳'
    },
    specs: [
      { name: '驱动单元', value: '11mm动态驱动单元' },
      { name: '频率响应', value: '20Hz - 20kHz' },
      { name: '阻抗', value: '32Ω' },
      { name: '灵敏度', value: '105dB/mW' },
      { name: '防水等级', value: 'IPX4' },
      { name: '重量', value: '单耳5.4g，充电盒45g' }
    ],
    reviews: {
      total: 128,
      averageRating: 4.8,
      breakdown: [
        { stars: 5, count: 102, percentage: 79.7 },
        { stars: 4, count: 20, percentage: 15.6 },
        { stars: 3, count: 4, percentage: 3.1 },
        { stars: 2, count: 1, percentage: 0.8 },
        { stars: 1, count: 1, percentage: 0.8 }
      ],
      comments: [
        {
          id: 1,
          userName: '张小明',
          rating: 5,
          date: '2024-05-15',
          content: '音质非常好，降噪效果也很棒，佩戴舒适度也很高，续航时间长，值得购买！',
          color: '黑色',
          size: '均码',
          usefulCount: 35
        },
        {
          id: 2,
          userName: '李小花',
          rating: 4,
          date: '2024-05-10',
          content: '整体表现不错，音质清晰，蓝牙连接稳定，唯一的小缺点是夏天戴久了有点热。',
          color: '白色',
          size: '均码',
          usefulCount: 12
        },
        {
          id: 3,
          userName: '王大力',
          rating: 5,
          date: '2024-05-05',
          content: '降噪效果超乎想象，在地铁上也能安静地听音乐，电池续航也很给力，充一次电用一周没问题。',
          color: '银色',
          size: '均码',
          usefulCount: 28
        }
      ]
    }
  },
  {
    id: 2,
    name: '智能手表 Pro',
    price: 1999,
    image: 'https://via.placeholder.com/600x400?text=Smart+Watch+Pro',
    description: '这款智能手表具有全面的健康监测功能，支持心率、血氧、睡眠监测等多种健康指标。支持多种运动模式，50米防水，长达14天的续航时间。',
    colors: ['黑色', '银色', '金色'],
    sizes: ['42mm', '46mm'],
    details: {
      battery: '约14天续航',
      waterproof: '50米防水',
      connectivity: '蓝牙5.2',
      display: 'AMOLED触控屏'
    },
    specs: [
      { name: '屏幕尺寸', value: '1.43英寸' },
      { name: '分辨率', value: '466x466像素' },
      { name: '处理器', value: '双核处理器' },
      { name: '内存', value: '1GB RAM + 32GB ROM' },
      { name: '传感器', value: '光学心率、血氧、加速度计等' },
      { name: '重量', value: '约38g（不含表带）' }
    ],
    reviews: {
      total: 87,
      averageRating: 4.7,
      breakdown: [
        { stars: 5, count: 68, percentage: 78.2 },
        { stars: 4, count: 15, percentage: 17.2 },
        { stars: 3, count: 3, percentage: 3.4 },
        { stars: 2, count: 1, percentage: 1.1 },
        { stars: 1, count: 0, percentage: 0 }
      ],
      comments: [
        {
          id: 1,
          userName: '赵小红',
          rating: 5,
          date: '2024-05-20',
          content: '健康监测功能很准确，续航也比我之前用的智能手表好很多，14天的续航真的很省心。',
          color: '银色',
          size: '42mm',
          usefulCount: 23
        },
        {
          id: 2,
          userName: '刘小刚',
          rating: 4,
          date: '2024-05-15',
          content: '功能很全面，运动模式也很多，唯一的不足是APP的响应速度有点慢。',
          color: '黑色',
          size: '46mm',
          usefulCount: 16
        },
        {
          id: 3,
          userName: '陈小美',
          rating: 5,
          date: '2024-05-10',
          content: '外观很漂亮，做工精细，屏幕显示效果很好，阳光下也能清晰看到，值得购买！',
          color: '金色',
          size: '42mm',
          usefulCount: 29
        }
      ]
    }
  },
  {
    id: 3,
    name: '超薄笔记本电脑',
    price: 6999,
    image: 'https://via.placeholder.com/600x400?text=Thin+Laptop',
    description: '这款超薄笔记本电脑采用最新处理器，性能强劲，同时保持了轻薄的机身设计。高达12小时的续航时间，让您的工作更加高效。',
    colors: ['银色', '深空灰'],
    sizes: ['13.3英寸', '14英寸'],
    details: {
      processor: '第12代Intel Core i7',
      memory: '16GB LPDDR5',
      storage: '512GB NVMe SSD',
      battery: '12小时续航',
      display: '1080p IPS触控屏'
    },
    specs: [
      { name: '屏幕尺寸', value: '13.3英寸/14英寸' },
      { name: '分辨率', value: '1920x1080像素' },
      { name: '显卡', value: 'Intel Iris Xe Graphics' },
      { name: '接口', value: '2x Thunderbolt 4, USB-C, 耳机接口' },
      { name: '重量', value: '约1.2kg' },
      { name: '尺寸', value: '304.1 x 212.4 x 14.6mm' }
    ],
    reviews: {
      total: 65,
      averageRating: 4.9,
      breakdown: [
        { stars: 5, count: 58, percentage: 89.2 },
        { stars: 4, count: 6, percentage: 9.2 },
        { stars: 3, count: 1, percentage: 1.5 },
        { stars: 2, count: 0, percentage: 0 },
        { stars: 1, count: 0, percentage: 0 }
      ],
      comments: [
        {
          id: 1,
          userName: '周小明',
          rating: 5,
          date: '2024-05-25',
          content: '太轻薄了，性能却很强劲，办公和轻度游戏都没问题，续航也很棒，出差带着很方便。',
          color: '银色',
          size: '14英寸',
          usefulCount: 42
        },
        {
          id: 2,
          userName: '吴小华',
          rating: 5,
          date: '2024-05-20',
          content: '屏幕素质很好，键盘手感也不错，散热控制得很好，长时间使用也不会太热。',
          color: '深空灰',
          size: '13.3英寸',
          usefulCount: 35
        },
        {
          id: 3,
          userName: '郑小强',
          rating: 4,
          date: '2024-05-15',
          content: '整体很满意，就是接口有点少，需要准备一个扩展坞，不过这也是轻薄本的通病了。',
          color: '银色',
          size: '14英寸',
          usefulCount: 18
        }
      ]
    }
  },
  {
    id: 4,
    name: '智能扫地机器人',
    price: 2499,
    image: 'https://via.placeholder.com/600x400?text=Robot+Vacuum',
    description: '这款智能扫地机器人采用激光导航技术，智能避障，自动充电，支持APP远程控制。大吸力设计，适用于各种地板类型，让您的家居清洁更加轻松。',
    colors: ['黑色', '白色'],
    sizes: ['均码'],
    details: {
      battery: '约120分钟续航',
      suctionPower: '4000Pa大吸力',
      navigation: 'LDS激光导航',
      smartControl: 'APP远程控制'
    },
    specs: [
      { name: '吸力', value: '4000Pa' },
      { name: '尘盒容量', value: '0.45L' },
      { name: '电池容量', value: '5200mAh' },
      { name: '噪音', value: '<68dB' },
      { name: '充电时间', value: '约4小时' },
      { name: '尺寸', value: '350x350x96mm' }
    ],
    reviews: {
      total: 92,
      averageRating: 4.6,
      breakdown: [
        { stars: 5, count: 68, percentage: 73.9 },
        { stars: 4, count: 20, percentage: 21.7 },
        { stars: 3, count: 3, percentage: 3.3 },
        { stars: 2, count: 1, percentage: 1.1 },
        { stars: 1, count: 0, percentage: 0 }
      ],
      comments: [
        {
          id: 1,
          userName: '钱小红',
          rating: 5,
          date: '2024-05-30',
          content: '清扫很干净，避障能力强，不会卡在家具下面，APP控制也很方便，懒人必备！',
          color: '白色',
          size: '均码',
          usefulCount: 56
        },
        {
          id: 2,
          userName: '孙小刚',
          rating: 4,
          date: '2024-05-25',
          content: '吸力很大，毛发都能吸干净，噪音也比我之前用的小很多，就是有时候规划路径有点奇怪。',
          color: '黑色',
          size: '均码',
          usefulCount: 28
        },
        {
          id: 3,
          userName: '李小美',
          rating: 5,
          date: '2024-05-20',
          content: '续航很好，120平米的房子一次就能打扫完，自动充电也很方便，真的是解放双手的好帮手。',
          color: '白色',
          size: '均码',
          usefulCount: 43
        }
      ]
    }
  }
]

// 当路由参数变化时更新产品信息
onMounted(() => {
  // 检查登录状态
  if (!NewShopAuthService.isLoggedIn()) {
    // 跳转到登录页面
    window.location.href = '/new-shop-login'
    return
  }
  
  loadProductDetails()
})

// 加载产品详情
const loadProductDetails = () => {
  isLoading.value = true
  errorMessage.value = ''
  
  try {
    // 模拟根据ID获取产品详情
    const foundProduct = productsData.find(p => p.id === productId.value)
    
    if (!foundProduct) {
      errorMessage.value = '找不到该产品'
      return
    }
    
    product.value = foundProduct
    
    // 设置默认选中的颜色和尺寸
    if (product.value.colors.length > 0) {
      selectedColor.value = product.value.colors[0]
    }
    if (product.value.sizes.length > 0) {
      selectedSize.value = product.value.sizes[0]
    }
  } catch (error) {
    errorMessage.value = '加载产品详情失败'
    console.error('加载产品详情错误:', error)
  } finally {
    isLoading.value = false
  }
}

// 增加数量
const increaseQuantity = () => {
  quantity.value++
}

// 减少数量
const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--
  }
}

// 加入购物车
const addToCart = async () => {
  if (!product.value) return
  
  if (!selectedColor.value || !selectedSize.value) {
    alert('请选择颜色和尺寸')
    return
  }
  
  try {
    await NewShopCartService.addToCart(
      product.value,
      quantity.value,
      selectedColor.value,
      selectedSize.value
    )
    alert('商品已成功加入购物车！')
  } catch (error) {
    console.error('加入购物车失败:', error)
    alert('加入购物车失败，请重试')
  }
}

// 立即购买
const buyNow = async () => {
  if (!product.value) return
  
  if (!selectedColor.value || !selectedSize.value) {
    alert('请选择颜色和尺寸')
    return
  }
  
  try {
    // 先将商品加入购物车
    await NewShopCartService.addToCart(
      product.value,
      quantity.value,
      selectedColor.value,
      selectedSize.value
    )
    
    // 跳转到结算页面
    window.location.href = '/new-shop/checkout'
  } catch (error) {
    console.error('加入购物车失败:', error)
    alert('购买过程中出错，请重试')
  }
}

// 切换标签页
const activeTab = ref(0) // 0: 商品详情, 1: 规格参数, 2: 售后服务, 3: 用户评价
const switchTab = (index) => {
  activeTab.value = index
}

// 评价相关函数
const markUseful = (commentId) => {
  // 实际应用中，这里应该调用API标记评价有用
  const comment = product.value?.reviews?.comments?.find(c => c.id === commentId)
  if (comment) {
    comment.usefulCount += 1
  }
}
</script>

<template>
  <div class="new-shop-product-detail-container">
    <!-- 导航栏 -->
    <nav class="new-shop-nav">
      <div class="nav-logo">
        <svg viewBox="0 0 24 24" width="24" height="24" stroke="#2196F3" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="9" cy="21" r="1"></circle>
          <circle cx="20" cy="21" r="1"></circle>
          <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
        </svg>
        <span>NewShop</span>
      </div>
    </nav>
    
    <!-- 主要内容 -->
    <main class="new-shop-product-detail-main">
      <div v-if="isLoading" class="loading-state">
        <div class="loading-spinner"></div>
        <p>加载中...</p>
      </div>
      
      <div v-else-if="errorMessage" class="error-state">
        <p>{{ errorMessage }}</p>
      </div>
      
      <div v-else class="product-detail-content">
        <!-- 产品图片和基本信息 -->
        <div class="product-basic-info">
          <div class="product-image-section">
            <img :src="product.image" :alt="product.name" class="main-product-image" />
          </div>
          
          <div class="product-info-section">
            <h1 class="product-name">{{ product.name }}</h1>
            <div class="product-price">¥{{ product.price }}</div>
            <p class="product-description">{{ product.description }}</p>
            
            <!-- 颜色选择 -->
            <div class="option-group">
              <label>颜色：</label>
              <div class="color-options">
                <button 
                  v-for="color in product.colors" 
                  :key="color" 
                  class="color-option"
                  :class="{ 'selected': selectedColor === color }"
                  @click="selectedColor = color"
                >
                  {{ color }}
                </button>
              </div>
            </div>
            
            <!-- 尺寸选择 -->
            <div class="option-group">
              <label>尺寸：</label>
              <div class="size-options">
                <button 
                  v-for="size in product.sizes" 
                  :key="size" 
                  class="size-option"
                  :class="{ 'selected': selectedSize === size }"
                  @click="selectedSize = size"
                >
                  {{ size }}
                </button>
              </div>
            </div>
            
            <!-- 数量选择 -->
            <div class="option-group">
              <label>数量：</label>
              <div class="quantity-selector">
                <button class="quantity-button" @click="decreaseQuantity">-</button>
                <span class="quantity-value">{{ quantity }}</span>
                <button class="quantity-button" @click="increaseQuantity">+</button>
              </div>
            </div>
            
            <!-- 购买按钮 -->
            <div class="action-buttons">
              <button class="primary-button" @click="addToCart">加入购物车</button>
              <button class="secondary-button" @click="buyNow">立即购买</button>
            </div>
          </div>
        </div>
        
        <!-- 产品详情标签页 -->
          <div class="product-details-tabs">
            <div class="tabs-header">
              <button class="tab-button" :class="{ active: activeTab === 0 }" @click="switchTab(0)">商品详情</button>
              <button class="tab-button" :class="{ active: activeTab === 1 }" @click="switchTab(1)">规格参数</button>
              <button class="tab-button" :class="{ active: activeTab === 2 }" @click="switchTab(2)">售后服务</button>
              <button class="tab-button" :class="{ active: activeTab === 3 }" @click="switchTab(3)">用户评价 ({{ product.reviews?.total || 0 }})</button>
            </div>
            
            <div class="tabs-content">
              <!-- 商品详情内容 -->
              <div class="tab-panel" :class="{ active: activeTab === 0 }">
                <div class="detail-section">
                  <h3>基本信息</h3>
                  <div class="detail-list">
                    <div v-for="(value, key) in product.details" :key="key" class="detail-item">
                      <span class="detail-key">{{ key }}：</span>
                      <span class="detail-value">{{ value }}</span>
                    </div>
                  </div>
                </div>
                
                <div class="detail-section">
                  <h3>产品介绍</h3>
                  <p>这里是产品的详细介绍内容，包括产品的设计理念、使用场景、优势特点等。在实际应用中，这里会包含更丰富的产品介绍，可能包含更多图片、视频等多媒体内容。</p>
                  <p>{{ product.name }}采用高品质材料制造，经过严格的质量控制，确保为用户提供优质的使用体验。我们提供完善的售后服务，让您无后顾之忧。</p>
                </div>
              </div>
              
              <!-- 规格参数内容 -->
              <div class="tab-panel" :class="{ active: activeTab === 1 }">
                <table class="specs-table">
                  <tbody>
                    <tr v-for="spec in product.specs" :key="spec.name">
                      <td class="spec-name">{{ spec.name }}</td>
                      <td class="spec-value">{{ spec.value }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              
              <!-- 售后服务内容 -->
              <div class="tab-panel" :class="{ active: activeTab === 2 }">
                <div class="service-section">
                  <h3>售后服务政策</h3>
                  <ul>
                    <li>全国联保，享受三包服务</li>
                    <li>质保期为：{{ product.name.includes('电脑') ? '2年' : '1年' }}</li>
                    <li>如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在质保期内享受免费保修等三包服务！</li>
                    <li>售后服务热线：400-800-8888</li>
                    <li>工作时间：周一至周日 9:00-18:00</li>
                  </ul>
                </div>
              </div>
              
              <!-- 用户评价内容 -->
              <div class="tab-panel" :class="{ active: activeTab === 3 }">
                <div class="reviews-section">
                  <!-- 评价总览 -->
                  <div class="reviews-summary">
                    <div class="rating-overview">
                      <div class="average-rating">
                        <span class="rating-score">{{ product.reviews?.averageRating || 0 }}</span>
                        <div class="rating-stars">
                          <i v-for="n in 5" :key="n" :class="['star', { 'filled': n <= (product.reviews?.averageRating || 0) }]">★</i>
                        </div>
                      </div>
                      <div class="rating-count">{{ product.reviews?.total }} 条评价</div>
                    </div>
                    
                    <!-- 评分分布 -->
                    <div class="rating-breakdown">
                      <div v-for="item in product.reviews?.breakdown" :key="item.stars" class="rating-item">
                        <div class="rating-label">
                          <span>{{ item.stars }} 星</span>
                          <span>{{ item.count }} ({{ item.percentage }}%)</span>
                        </div>
                        <div class="rating-bar">
                          <div class="rating-fill" :style="{ width: item.percentage + '%' }"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                  
                  <!-- 评价列表 -->
                  <div class="reviews-list">
                    <div v-for="comment in product.reviews?.comments" :key="comment.id" class="review-item">
                      <div class="review-header">
                        <div class="user-info">
                          <span class="user-name">{{ comment.userName }}</span>
                          <div class="review-rating">
                            <i v-for="n in 5" :key="n" :class="['star', { 'filled': n <= comment.rating }]">★</i>
                          </div>
                        </div>
                        <div class="review-meta">
                          <span class="review-date">{{ comment.date }}</span>
                          <span class="review-options">
                            {{ comment.color }} / {{ comment.size }}
                          </span>
                        </div>
                      </div>
                      <div class="review-content">
                        {{ comment.content }}
                      </div>
                      <div class="review-actions">
                        <button class="useful-btn" @click="markUseful(comment.id)">
                          有用 ({{ comment.usefulCount }})
                        </button>
                      </div>
                    </div>
                  </div>
                  
                  <!-- 加载更多按钮 -->
                  <div class="reviews-pagination">
                    <button class="load-more-btn">
                      加载更多评价
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </div>
    </main>
    
    <!-- 页脚 -->
    <footer class="new-shop-footer">
      <div class="footer-bottom">
        <p>© 2024 NewShop. 保留所有权利。</p>
      </div>
    </footer>
  </div>
</template>

<style scoped>
.new-shop-product-detail-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 导航栏样式（简化版） */
.new-shop-nav {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 15px 30px;
  display: flex;
  align-items: center;
}

.nav-logo {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
  color: #2196F3;
}

.nav-logo svg {
  margin-right: 10px;
}

/* 主要内容样式 */
.new-shop-product-detail-main {
  flex: 1;
  padding: 30px;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50vh;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #2196F3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50vh;
  color: #f44336;
  font-size: 18px;
}

.product-detail-content {
  max-width: 1200px;
  margin: 0 auto;
}

.product-basic-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}

.product-image-section {
  background-color: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.main-product-image {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
}

.product-info-section {
  display: flex;
  flex-direction: column;
}

.product-name {
  font-size: 32px;
  margin: 0 0 20px 0;
  color: #333;
}

.product-price {
  font-size: 36px;
  font-weight: 700;
  color: #2196F3;
  margin: 0 0 20px 0;
}

.product-description {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 30px 0;
}

.option-group {
  margin-bottom: 20px;
}

.option-group label {
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
  color: #333;
}

.color-options {
  display: flex;
  gap: 10px;
}

.color-option {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.color-option:hover {
  border-color: #2196F3;
}

.color-option.selected {
  border-color: #2196F3;
  background-color: #E3F2FD;
  color: #2196F3;
}

.size-options {
  display: flex;
  gap: 10px;
}

.size-option {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.size-option:hover {
  border-color: #2196F3;
}

.size-option.selected {
  border-color: #2196F3;
  background-color: #E3F2FD;
  color: #2196F3;
}

.quantity-selector {
  display: flex;
  align-items: center;
  width: 120px;
}

.quantity-button {
  width: 36px;
  height: 36px;
  border: 1px solid #ddd;
  background-color: white;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.quantity-button:hover {
  background-color: #f5f5f5;
}

.quantity-button:first-child {
  border-radius: 6px 0 0 6px;
}

.quantity-button:last-child {
  border-radius: 0 6px 6px 0;
}

.quantity-value {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.action-buttons {
  display: flex;
  gap: 15px;
  margin-top: 40px;
}

.primary-button {
  flex: 1;
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.primary-button:hover {
  background-color: #1976D2;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.secondary-button {
  flex: 1;
  background-color: #FF9800;
  color: white;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.secondary-button:hover {
  background-color: #F57C00;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

/* 产品详情标签页样式 */
.product-details-tabs {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.tabs-header {
  display: flex;
  border-bottom: 1px solid #eee;
}

.tab-button {
  padding: 15px 30px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  transition: all 0.3s ease;
  position: relative;
}

.tab-button:hover {
  color: #2196F3;
  background-color: #f5f5f5;
}

.tab-button.active {
  color: #2196F3;
  font-weight: 600;
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #2196F3;
}

.tabs-content {
  padding: 30px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.detail-section {
  margin-bottom: 30px;
}

.detail-section h3 {
  font-size: 20px;
  margin: 0 0 20px 0;
  color: #333;
}

.detail-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
}

.detail-item {
  display: flex;
}

.detail-key {
  font-weight: 600;
  margin-right: 10px;
  color: #333;
}

.detail-value {
  color: #666;
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
}

.specs-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
}

.spec-name {
  font-weight: 600;
  color: #333;
  width: 30%;
}

.spec-value {
  color: #666;
}

.service-section h3 {
  font-size: 20px;
  margin: 0 0 20px 0;
  color: #333;
}

.service-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-section li {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
  color: #666;
}

.service-section li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #2196F3;
  font-size: 20px;
  line-height: 1;
}

/* 用户评价相关样式 */
.reviews-section {
  padding: 20px 0;
}

.reviews-summary {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
}

.rating-overview {
  flex-shrink: 0;
  text-align: center;
}

.average-rating {
  margin-bottom: 10px;
}

.rating-score {
  font-size: 48px;
  font-weight: 700;
  color: #2196F3;
  display: block;
}

.rating-stars {
  font-size: 20px;
  margin: 10px 0;
}

.star {
  color: #ddd;
}

.star.filled {
  color: #FFD700;
}

.rating-count {
  font-size: 16px;
  color: #666;
}

.rating-breakdown {
  flex: 1;
}

.rating-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.rating-label {
  display: flex;
  justify-content: space-between;
  width: 150px;
  margin-right: 20px;
  font-size: 14px;
  color: #666;
}

.rating-bar {
  flex: 1;
  height: 8px;
  background-color: #f5f5f5;
  border-radius: 4px;
  overflow: hidden;
}

.rating-fill {
  height: 100%;
  background-color: #2196F3;
  border-radius: 4px;
}

.reviews-list {
  margin-bottom: 30px;
}

.review-item {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.review-item:last-child {
  border-bottom: none;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-name {
  font-weight: 600;
  color: #333;
}

.review-rating {
  font-size: 16px;
}

.review-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  font-size: 14px;
  color: #999;
}

.review-content {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 15px;
}

.review-actions {
  display: flex;
  gap: 15px;
}

.useful-btn {
  padding: 5px 15px;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 20px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
}

.useful-btn:hover {
  border-color: #2196F3;
  color: #2196F3;
}

.reviews-pagination {
  text-align: center;
  padding: 20px 0;
}

.load-more-btn {
  padding: 10px 30px;
  border: 1px solid #2196F3;
  background-color: white;
  border-radius: 25px;
  font-size: 16px;
  color: #2196F3;
  cursor: pointer;
  transition: all 0.3s ease;
}

.load-more-btn:hover {
  background-color: #2196F3;
  color: white;
}

/* 页脚样式（简化版） */
.new-shop-footer {
  background-color: #333;
  color: white;
  padding: 30px;
}

.footer-bottom {
  text-align: center;
  font-size: 14px;
  color: #999;
}
</style>